<template>
    <div class="left-box" v-loading="loading">
        <router-link to="/console/" class="logo pic">
            <img src="@/assets/logo.png" />
        </router-link>
        <div class="btn-list">
            <template v-for="(value, key, index) in langList" :key="key">
                <span class="space" v-if="index !== 0"> | </span>
                <el-button link @click="switchLangHandle(key)" :class="{ active: locale === key }">{{ value }}</el-button>
            </template>
        </div>
        <h1 class="tit">{{ $t('resetPassword.reset_password_title') }}</h1>
        <el-alert :title="alertCon" :closable="false" v-if="alertCon" />
        <el-form>
            <el-form-item size="large" prop="account">
                <el-input v-model="form.password" type="password" show-password :placeholder="$t('resetPassword.password_placeholder')" />
            </el-form-item>
            <el-form-item size="large" prop="email">
                <el-input v-model="form.confirm_password" type="password" show-password :placeholder="$t('resetPassword.confirm_password_placeholder')" />
            </el-form-item>
            <el-button size="large" class="login-btn" color="#F06423" @click="resetPasswordHandle" v-if="verifyToken">{{ $t('resetPassword.btn1_text') }}</el-button>
            <el-button size="large" class="login-btn" color="#F06423" @click="goPage('/')">{{ $t('resetPassword.btn2_text') }}</el-button>
        </el-form>
        <p class="copyright">Copyright © 2025 The Education University of Hong Kong</p>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

import { useI18n } from 'vue-i18n'
import { setLocale, langList } from '@/locales/i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import AuthService from '@/api/auth'

import { goPage } from '@/utils/global'

const route = useRoute()
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
const loading = ref(false)
const token = computed(() => route.query.token?.toString() ?? '')

// 语言切换
const switchLangHandle = (lang: SupportedLocales) => {
    setLocale(lang)
    locale.value = lang
}

// 表单
const form = reactive({
    id: null as number | null,
    password: '',
    confirm_password: '',
})
const resetPasswordHandle = () => {
    loading.value = true
    if (!form.id) {
        alertCon.value = t('resetPassword.verify_token_error')
        return
    }

    AuthService.resetPassword({
        id: form.id,
        password: form.password,
        confirm_password: form.confirm_password,
        token: token.value,
    })
        .then(() => {
            goPage('/')
        })
        .finally(() => {
            loading.value = false
        })
}

// 驗證token
const alertCon = ref('')
const verifyToken = ref(false)
function verifyTokenHandle() {
    loading.value = true
    AuthService.verifyToken(token.value)
        .then(res => {
            form.id = res.data.id
            verifyToken.value = true
        })
        .catch(err => {
            loading.value = false
            alertCon.value = err.message
        })
        .finally(() => {
            loading.value = false
        })
}

onMounted(() => {
    verifyTokenHandle()
})
</script>
